<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:costa="http://stdio.costa/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	template="/WEB-INF/layout/template.xhtml">
	<f:metadata>
		<f:viewParam name="id" value="#{productHome.id}">
			<f:convertNumber integerOnly="#{true}" />
		</f:viewParam>
		<f:event type="preRenderView" listener="#{productHome.postConstruct}" />
	</f:metadata>
	<ui:define name="content">
		<h:form prependId="false">
			<costa:classificationPicker id="classificationPicker" target="#{productHome.entity.classification}" renderTarget="classification classificationHidden"/>
			<h:panelGrid columns="3" id="productDetail" columnClasses="topAligned">
				<rich:validator event="change">
					<costa:outputText id="id" value="#{productHome.entity.id}" label="#{messages.id}" />
					
					<h:outputLabel for="classification" value="#{messages.classification}" />
					<h:panelGroup>
						<h:inputText id="classification" readonly="true" value="#{productHome.entity.classification.name}" />
						<h:inputHidden id="classificationHidden" value="#{productHome.entity.classification}" converter="#{classificationConverter}"/>
						<a4j:commandLink execute="@this">
		                    #{messages.select}
		                    <rich:componentControl event="click" operation="show" target="classificationPicker">
								<a4j:param name="event" value="event" noEscape="true" />
							</rich:componentControl>
	                	</a4j:commandLink>
                	</h:panelGroup>
                	<rich:message for="classificationHidden" />
                	
                	<costa:selectOneMenu id="os" label="#{messages.os}" converter="#{osConverter}" value="#{productHome.entity.os}" valueList="#{osConverter.list}" itemLabel="name" />
                	
					<costa:inputText id="name" value="#{productHome.entity.name}" label="#{messages.name}" />
					<h:outputLabel for="color" value="#{messages.color}" />
					<rich:pickList converter="#{colorConverter}" id="color" value="#{productHome.entity.colors}" sourceCaption="#{messages['color.availables']}" targetCaption="#{messages['color.selected']}" listWidth="165px" listHeight="100px" orderable="true">
		                <f:selectItems value="#{colorConverter.list}" var="color" itemValue="#{color}" itemLabel="#{color.name}" />
		            </rich:pickList>
		            <rich:message for="color" />
		            
					<costa:selectOneMenu id="specification" label="#{messages.specification}" converter="#{specificationConverter}" value="#{productHome.entity.specification}" valueList="#{specificationConverter.list}" itemLabel="name" />
					<costa:inputTextarea id="comments" value="#{productHome.entity.comments}" label="#{messages.comments}" rows="5" cols="60"/>
				</rich:validator>
			</h:panelGrid>
			<h:commandButton action="#{productHome.save}" value="#{messages.save}" />
		</h:form>
		<h:form prependId="false">
            <rich:dataTable value="#{productQuery.dataModel}" var="product" id="productTable" rows="#{productQuery.dataTable.pageSize}" keepSaved="true">
				<costa:column header="#{messages.id}" value="#{product.id}" property="id" dataTable="#{productQuery.dataTable}" tableId="productTable" scrollerId="productTableScroller" />
				<costa:outputColumn header="#{messages.classification}" value="#{product.classification.name}"  />
				<costa:column header="#{messages.name}" value="#{product.name}" property="name" dataTable="#{productQuery.dataTable}" tableId="productTable" scrollerId="productTableScroller" />
				<costa:outputColumn header="#{messages.os}" value="#{product.os.name}"  />
				<costa:outputColumn header="#{messages.color}" value="#{stringUtilsDecorator.join(product.colors, ',')}"  />
				<costa:outputColumn header="#{messages.specification}" value="#{product.specification.name}" />
				<costa:outputColumn header="#{messages.comments}" value="#{product.comments}"  />
				<rich:column>
					<a4j:commandLink render="productDetail" execute="@this">
	                    #{messages.edit}
	                    <f:setPropertyActionListener target="#{productHome.entity}" value="#{product}" />
                	</a4j:commandLink>
                	<br /><br />
                	<a4j:commandLink execute="@this">
	                    #{messages.delete}
	                    <rich:componentControl event="click" operation="show" target="deleteConfirm">
							<a4j:param name="event" value="event" noEscape="true" />
						</rich:componentControl>
                	</a4j:commandLink>
                	<rich:popupPanel id="deleteConfirm" autosized="true" modal="true" moveable="false" resizeable="false" followByScroll="false">
						<h:outputFormat value="#{messages['tip.delete']}">
							<f:param value="#{product.name}" />
						</h:outputFormat>
						<h:panelGroup>
							<h:commandButton onclick="#{rich:component('deleteConfirm')}.hide(event); return true;" action="#{productHome.delete(product.id)}" value="#{messages.confirm}" />
							<a4j:commandButton onclick="#{rich:component('deleteConfirm')}.hide(event); return false;" value="#{messages.cancel}" />
						</h:panelGroup>
					</rich:popupPanel>
				</rich:column>
				<f:facet name="footer">
	                <rich:dataScroller id="productTableScroller" />
	            </f:facet>
            </rich:dataTable>
		</h:form>
	</ui:define>
</ui:composition>
